<script setup lang="ts">
import Page from './components/page.vue'
// import {defaultProps} from "@/utils/tree";
//   const state = reactive({
//
//   })
const queryParams = reactive({
  id: '',
  phases: '',
  mountainName: '',
  createTime: undefined
})
const mountainList = [
  {value:'昆仑山',label:'昆仑山'},
  {value:'蓬莱岛',label:'蓬莱岛'},
  {value:'瀛洲山',label:'瀛洲山'},
  {value:'方丈山',label:'方丈山'},
  {value:'不周山',label:'不周山'},
  {value:'青山丘',label:'青山丘'},
  {value:'罗浮山',label:'罗浮山'},
  {value:'崆峒山',label:'崆峒山'},
]
function handleQuery(){
  console.log('queryParams', queryParams)
}
function resetQuery(){

}
</script>

<template>
    <!-- 搜索工作栏 -->
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        class="pr-500px "
        label-width="68px"
      >
        <el-form-item label="玩家ID" prop="name">
          <el-input
            v-model="queryParams.id"
            class="!w-240px"
            clearable
            placeholder="请输入玩家ID"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="期数" prop="name">
          <el-input
            v-model="queryParams.phases"
            class="!w-240px"
            clearable
            placeholder="请输入期数"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-240px"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
            type="daterange"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="仙山名" prop="mountainName">
          <el-cascader
            v-model="queryParams.mountainName"
            :options="mountainList"
            class="w-1/1"
            clearable
            filterable
            placeholder="请选择仙山"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>

        </el-form-item>
      </el-form>

    <Page page-type="1" class="ml-4"/>


</template>

<style scoped lang="scss">
:deep(.el-form-item__label){
  justify-content: flex-start;
}
</style>
